<!--警情会商-->
<template>
  <div class="con">
    <div class="conTitle">
      <span class="el-dialog__title" style="font-size: 16px;">添加成员</span>
      <button type="button" aria-label="Close" class="el-dialog__headerbtn" style="top: 14px;" @click="closeBtn">
        <i class="el-dialog__close el-icon el-icon-close" style="font-size: 22px;"></i>
      </button>
    </div>
    <!-- <el-scrollbar style="height: 800px;padding:24px;" ref="scrollbar"> -->
    <div style="padding:0 24px;">
      <div class="btns">
        <el-button class="add" @click="handleAdd">创建会商</el-button>
      </div>
      <el-scrollbar style="height: 190px;margin-bottom: 15px;" ref="scrollbar">
        <el-table :data="tableData" :loading="loading" style="width: 100%;margin-bottom:20px;padding:0" @row-click="getInfo">
          <el-table-column prop="createTime" label="时间" width="160" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="会商名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="会商状态" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">
                <i class="point" style="background-color: #50c97a;"></i>
                进行中
              </span>
              <span v-else>
                <i class="point"></i>
                已结束
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status == 1 && scope.row.homeOwner == true" size="small" type="text" @click.stop="handleEnd(scope.row)">结束</el-button>
              <!-- <el-button size="small" type="text" style="margin-left: 10px;" @click="handleView(scope.row)">查看</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <el-scrollbar style="height: 470px;" ref="scrollbar">
        <div class="policeCon">
          <div class="policeTitle">
            <span class="title">{{avatarList.name}}</span>
            <el-button class="addPerson" @click="addPerson">添加成员</el-button>
          </div>
          <ul class="avatarList">
            <li v-for="(item,index) in avatarList.list" :key="index">
              <img src="../../../../assets/image/avatar.png" />
            </li>
          </ul>
          <div class="policeList">
            <ul>
              <li v-for="(item,index) in messageList" :key="index" :class="item.itself ? 'poRight' : ''">
                <span class="left">
                  <img src="../../../../assets/image/avatar.png" />
                </span>
                <div class="right">
                  <span class="name">{{item.senderName}}</span>
                  <p>{{item.message}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-scrollbar>
      <div class="sendBox" v-show="showSend">
        <el-input v-model="message" placeholder="输入发送内容" maxlength="300"></el-input>
        <el-button class="send" @click="websocketsend">发送</el-button>
      </div>
      <!-- </el-scrollbar> -->
    </div>
<!--    <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="addVisible" class="newaddDialog" :append-to-body="true" @close="addVisible = false" v-dialogDrag:{dialogDrag}="dialogDrag" width="550px">
      <addPolice @close="addVisible = false" :personList="personList" @listQuery="listQuery" @changePerson="changePerson" :type="type" :avList="avList"></addPolice>
    </el-dialog> -->



    <!-- 确认弹框 -->
    <!-- <confirm-popup ref="confirmPopup" :popupContent="popupContent" @popupSure="popupSure"></confirm-popup> -->
  </div>
</template>
<script>
import axios from "axios"
import addPolice from "./addPolice"
// import confirmPopup from "@/components/confirm-popup/index";
export default {
  components: { addPolice,, confirmPopup },
  props: {
    list: {}
  },
  data: function () {
    return {
      text: '',
      title: '',
      personList: [],
      loading: false,
      tableData: [],
      addVisible: false,
      endVisible: false, //已结束查看弹框
      dialogDrag: true, // 可拖拽
      popupContent: "确定要结束该会商吗？",
      rowid: '',
      avatarList: [],
      avList: [],
      type: 1, //创建会商1或者添加人员2 
      dialogTitle: '创建会商',
      message: '',
      messageList: [],
      showSend: true,
      userId: '', //用户id
      webSocket: null,
      changeDate: {},
    };
  },
  mounted() {
    let self = this;
    self.listQuery()
    //人员信息
    axios.get("system/user/getListAll ").then(function (res) {
      if (res.code == "200") {
        if (res.data) {
          self.personList = res.data;
        }
      } else {
        self.$message.error(res.message);
      }
    });



  },
  methods: {
    closeBtn(){
      this.$emit("close", '')
    },
    changePerson(data) {
      let arr = [];
      this.personList.map(item => {
        if (data.indexOf(item.id) > -1) {
          arr.push(item)
          this.avatarList.list = arr
        }
      })
    },
    initWebSocket(url) {
      console.log("创建WebSocket")
      this.websock = new WebSocket(url)
      this.websock.onopenonopen = this.websocketonopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      // let data = {
      //   code: 0,
      //   msg: '这是client：初次连接'
      // };
      // this.websocketsend(data)
      console.log('WebSocket连接');

    },
    websocketonerror() {
      console.log('WebSocket连接失败');
    },
    // 数据接收
    websocketonmessage(e) {
      console.log('数据接收' + e.data);
      let data = JSON.parse(e.data);
      if(data.data.code!="closeAll"){
        if (data.data.message) {
          if (data.data.sender == this.userId) {
            data.data.itself = true
          }
          this.messageList.push(data.data)
        }
      } else {
        this.websock.close();
        this.showSend = false;
        this.$message.warning(data.data.message);
      }
    },
    // 数据发送
    websocketsend(Data) {
      var data = {
        message: this.message,
        code: "send",
      }
      this.websock.send(JSON.stringify(data));
      this.message = "";
      this.messageList.push()
    },
    // 关闭
    websocketclose(e) {
      console.log('已关闭连接', e);
    },
    closeDialog() {
      this.websock.close();//断开连接
      // this.$emit("close");
    },
    handleAdd() {
      this.addVisible = true
      this.dialogTitle = '创建会商'
      this.type = 1
      this.avList = []
    },
    addPerson() {
      this.addVisible = true
      this.dialogTitle = '添加成员'
      this.type = 2
      this.avList = this.avatarList
    },
    // 结束
    handleEnd(row) {
      this.rowid = row.id
      this.$nextTick(() => {
        this.$refs.confirmPopup.initState(row)
      });

    },
    // 框确认
    popupSure() {
      let self = this
      axios.get("/dispatch/meet/stopMeet?meetId=" + this.rowid).then(function (res) {
        if (res.code == "200") {
          self.$message.success(res.message)
          self.$nextTick(() => {
            //发给所有人通知
            var data = {
              message: "当前会话已结束",
              code: "closeAll",
            };
            self.websock.send(JSON.stringify(data));
            self.listQuery()
          })
        } else {
          self.$message.error(res.message)
        }
      })
        .catch((err) => {
          console.log(`err${err}`)
        })
    },
    //已结束的查看
    handleView(row) {
      this.rowid = row.id
      this.endVisible = true;
    },
    getInfo(row) {
      this.avatarList = row
      this.avList = row
      this.websock.close();//断开连接
      if (row.status == 1) {
        this.showSend = true;
        this.process(row.id, this.userId);
      } else {
        this.showSend = false;
        this.end(row.id)
      }
    },
    process(id, userId) {  //进行中的聊天记录
      let self = this;
      axios.get("/dispatch/meet/getZTMeetListMessage?meetId=" + id).then(function (res) {
        if (res.code == "200") {
          self.messageList = res.data
          self.initWebSocket(`ws://172.19.2.68:7374/websocket/${id}/${userId}`);
        } else {
          self.$message.error(res.message)
        }
      })
        .catch((err) => {
          console.log(`err${err}`)
        })
    },
    end(id) {  //已结束的聊天记录
      let self = this;
      axios.get("/dispatch/meet/getMeetListMessage?meetId=" + id).then(function (res) {
        if (res.code == "200") {
          self.messageList = res.data
        } else {
          self.$message.error(res.message)
        }
      })
        .catch((err) => {
          console.log(`err${err}`)
        })
    },
    /** 查询列表数据。 */
    listQuery() {
      var self = this;
      this.loading = true;
      axios.get("dispatch/meet/getListAll").then(function (res) {
        if (res.code == "200") {
          self.loading = false;
          self.tableData = res.data.details;
          self.userId = res.data.userId
          self.avatarList = self.tableData[0];
          self.avList = self.tableData[0];
          self.process(self.tableData[0].id, self.userId)
          // self.initWebSocket(`ws://172.19.2.68:7374/websocket/${self.tableData[0].id}/${self.userId}`)
        } else {
          self.$message.error(res.message);
        }
      })
        .catch(function (err) {
          console.log(`err${err}`);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.con {
  position: fixed;
  background-color: #fff;
  right: 20px;
  top: 140px;
  width: 550px;
  height: 845px;
  z-index: 9;
  box-shadow: -1px 0px 8px 0px rgba(21, 25, 51, 0.1);
  .conTitle {
    border-bottom: 1px solid #ecedf2;
    padding: 12px 20px 12px;
  }
  .btns {
    border: 0;
    text-align: left;
    padding-left: 0;
  }
  .policeCon {
    border: 1px solid #d7dadf;
    padding: 15px;
    margin-bottom: 20px;
  }
  .policeTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      color: #212227;
      background: url(../../../../assets/image/radius.png) no-repeat 0 center;
      padding-left: 10px;
      margin-bottom: 6px;
      display: block;
    }
    ::v-deep .addPerson {
      span {
        font-size: 12px;
      }
      height: 24px;
      width: 74px;
    }
  }
  .avatarList {
    padding-left: 10px;
    margin: 14px 0 20px;
    li {
      display: inline-block;
      width: 28px;
      height: 28px;
      border-radius: 100%;
      margin-right: 15px;
      margin-bottom: 6px;
      img {
        width: 100%;
        border-radius: 100%;
        vertical-align: middle;
        margin-right: 3px;
      }
    }
  }
  .policeList {
    li {
      overflow: hidden;
      margin-bottom: 15px;
    }
    .poRight {
      .left {
        float: right;
        margin-left: 10px;
      }
      .right {
        float: right;
        text-align: right;
        p {
          text-align: left;
          border-top-left-radius: 6px;
          border-top-right-radius: 0px;
          border-bottom-right-radius: 6px;
          border-bottom-left-radius: 6px;
        }
      }
    }
    .left {
      display: inline-block;
      width: 34px;
      height: 34px;
      border-radius: 100%;
      float: left;
      margin-right: 10px;
      img {
        width: 100%;
        border-radius: 100%;
      }
    }
    .right {
      float: left;
      width: calc(100% - 100px);
      .name {
        color: #7c8396;
        margin-bottom: 5px;
        display: block;
      }
      p {
        background-color: #ecedf2;
        padding: 6px;
        border-top-left-radius: 0px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
        color: #202227;
        display: inline-block;
      }
    }
  }
  .sendBox {
    display: flex;
    margin-bottom: 20px;
    ::v-deep .el-input__inner {
      border-radius: 0;
      height: 36px;
      line-height: 36px;
      border-right: 0;
    }
    .send {
      height: 36px;
    }
  }
  ::v-deep .el-table {
    th {
      background-color: #fff !important;
    }
    td,
    th.is-leaf {
      border-color: #d7dadf;
    }
    .point {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 10px;
      background-color: #d2d3d8;
      margin-right: 4px;
    }
  }
}
</style>